<template>
  <a-button type="primary" class="revert_button f-r" @click="handleClick">
    回退
    <template #icon>
      <rollback-outlined />
    </template>
  </a-button>
</template>

<script lang="ts" setup>
import { ExclamationCircleOutlined, RollbackOutlined } from '@ant-design/icons-vue/lib/icons'
import { Modal } from 'ant-design-vue'
import { createVNode } from 'vue'
const emit = defineEmits(['revert', 'cancel'])

const handleClick = (): void => {
  Modal.confirm({
    title: '系统提示',
    content: '是否确认回退？',
    icon: createVNode(ExclamationCircleOutlined),
    onOk: () => {
      emit('revert')
    },
    onCancel: () => {
      emit('cancel')
    },
    okText: '确认',
    cancelText: '取消',
  })
}
</script>

<style lang="less" scoped>
.revert_button {
  border-width: 0px;
  width: 75px;
  height: 30px;
  background: inherit;
  border: none;
  border-radius: 3px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #ffffff;
  background-color: rgba(255, 153, 0, 1);
  &:hover {
    background-color: rgba(255, 195, 0, 1) !important;
  }
}
</style>
